<template>
    <view>
        <view style="height: 30rpx"></view>
        <view class="flex-wrap space-between">
            <view
                v-for="item in 20"
                :key="item"
                class="goods-item pb-20"
                @click="handleClick(item)"
            >
                <hj-image
                    mode="aspectFill"
                    img="https://ai-app01.oss-cn-guangzhou.aliyuncs.com/mpweixin/drone/data-bg.jpg"
                    width="100%"
                    height="280rpx"
                />
                <view class="ft-28 t-3 break-all text-over-2 goods-item-text mt-10">
                    无人机商品展示无人机商品展示无人机商品展示无人机商品展示无人机商品展示无人机商品展示
                </view>
                <view>
                    <view class="integral ft-36 bold mt-4">
                        1500<text class="no-bold ft-24 ml-6">积分</text>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
/**
 * @description 商品列表
 * @author yinzhi
 * @date 2025-03-17
 */
import { defineComponent } from 'vue'
defineComponent({
    name: 'GoodsList'
})

const props = defineProps({
    list: {
        type: Array,
        default: () => []
    }
})

// 点击商品 跳转到商品详情页
const handleClick = item => {
    uni.navigateTo({
        url: '/pages/goods/goods-details/index'
    })
}
</script>

<style scoped lang="scss">
.goods-item {
    width: calc((100vw - 88rpx) / 2);
    &-text {
        line-height: 40rpx;
        height: 80rpx;
    }
    .integral {
        color: #e51c23;
    }
}
</style>
